<aside class="" ng-mouseover="hover = true" ng-mouseleave="hover = false" ng-controller="CommonModuleCtrl">
    <nav>
        <ul ng-init="swtchFirstHref()">
            <li ng-repeat="item in activeNav.lv1.menuItems track by $index" ng-class="getMenuItemClass(item, activeNav)"
                ng-init="shouldDisplaySubMenu = hasSubMenuItems(item)" ng-if="inRoles(item.roles)" >
                <a ng-href="{{item.href}}" ng-click="shouldDisplaySubMenu = !shouldDisplaySubMenu;">
                    <i class="fa fa-lg fa-fw" ng-class="item.icon"></i>
                    <span class="menu-item-parent" ng-if="hover">{{item.name}}</span>
                    <b class="collapse-sign" ng-show="hasSubMenuItems(item)">
                        <em class="fa fa-expand-o" ng-show="!shouldDisplaySubMenu"></em>
                        <em class="fa fa-collapse-o" ng-show="shouldDisplaySubMenu"></em>
                    </b>
                </a>
                <ul ng-if="hasSubMenuItems(item)" ng-show="shouldDisplaySubMenu" style="display: block">
                    <li ng-class="{active: subItem.name == activeNav.lv3.name }" ng-repeat="subItem in item.subMenuItems">
                        <a href="{{subItem.href}}">{{subItem.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</aside>
